<template>
  <div class="c-page-table__body-sidebar" v-if="props.sidebarOption">
    <div class="body-sidebar__title"> 事项类型</div>
    <div class="body-sidebar__content">
      <div
        class="sidebar-content__item g-ell"
        :class="localActiveTab === '' ? 'sidebar-content__item--active' : ''"
        @click="handleChange('')"
      >
        全部
      </div>
      <div
        class="sidebar-content__item g-ell"
        :class="localActiveTab === item.value ? 'sidebar-content__item--active' : ''"
        v-for="item in props.sidebarOption.options"
        :key="item.value"
        @click="handleChange(item.value)"
      >
        {{ item.label }}
      </div>
    </div>
    <!-- <el-tabs
      v-model="localActiveTab"
      tab-position="left"
      style="height: 558px; width: 220px"
      class="left-tab"
      @change="handleChange"
    >
      <el-tab-pane label="全部" name=""> </el-tab-pane>
      <el-tab-pane
        v-for="item in props.sidebarOption.options"
        :key="item.value"
        :label="item.label"
        :name="item.value"
      >
      </el-tab-pane>
    </el-tabs> -->
  </div>
  <div class="c-page-table__body-sidebar--placeholder" v-if="props.sidebarOption"></div>
</template>

<script lang="ts" setup name="PageTableSidebar">
import { defineProps, defineEmits, reactive, computed } from 'vue';
import { pageTableSidebarProps } from './page-table-sidebar';

const props = defineProps(pageTableSidebarProps);
const emits = defineEmits(['change']);
/**
 * searchForm的映射
 */
const componentSearchForm = reactive(props.searchForm);

const localActiveTab = computed(() => {
  return props.sidebarOption?.field ? componentSearchForm[props.sidebarOption?.field] : '';
});

function handleChange(active: string) {
  console.log('handleChange', active);
  props.sidebarOption?.field && (componentSearchForm[props.sidebarOption?.field] = active);
  emits('change', componentSearchForm);
}
</script>

<style lang="scss">
@use '../styles/page-table-sidebar.scss' as *;
</style>
